@import "mixins";

#left {
  width: 50%;
  float: left;
  margin-left: 6%;
}

#right {
  margin-left: 50%;
  text-align: center;
  padding-right: 17%;
}

.clear {
  clear: both;
}

.mat-list {
  @include push--auto();
  display: table;

  /deep/ .mat-list-text {
    text-align: left !important;
  }
}

.hero-actions {
  padding-bottom: 0;

  .icon__remove {
    padding-left: 0.5rem;
    color: darkslategrey;
    cursor: pointer;
  }
}

form {
  display: grid;
  width: 80%;
  @include push--auto();

  .mat-raised-button {
    color: $secondary--color;
    background: $primary--color;
    width: 50%;
    @include push--auto();
  }

  .mat-form-field {
    width: 100%;
  }
}

#heroes-json {
  margin-top: 2rem;

  pre {
    margin-top: 1rem;
  }
}

@media (max-width: 680px) {
  #left {
    width: 100%;
    float: none;
    @include push--auto();
  }

  #right {
    margin: 1em auto 0;
    width: 90%;
    float: none;
    padding: 0;
  }
}
